<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./cookie.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .w {
        width: 1200px;
        margin: auto;
      }
      li {
        list-style: none;
      }
      header {
        position: relative;
        height: 100px;
        background: red;
        color: #fff;
        font-size: 30px;
        line-height: 100px;
        text-align: center;
      }
      .nav {
        height: 100px;
        background: orange;
        color: #fff;
        font-size: 30px;
        line-height: 100px;
        text-align: center;
      }
      .slide {
        height: 200px;
        background: yellow;
        color: #666;
        font-size: 30px;
        line-height: 200px;
        text-align: center;
      }
      .floor {
        height: 100px;
        color: #333;
        font-size: 40px;
        font-weight: bold;
        line-height: 100px;
        text-align: center;
      }
      .con {
        height: 300px;
        background: burlywood;
        color: #fff;
        font-size: 30px;
        line-height: 300px;
        text-align: center;
      }
      footer {
        height: 500px;
        background: goldenrod;
        color: #fff;
        font-size: 30px;
        line-height: 300px;
        text-align: center;
      }
      ol {
        position: fixed;
        bottom: 200px;
        right: 50px;
        height: 350px;
        width: 60px;
        border: 1px solid #333;
      }
      ol li {
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-bottom: 1px solid #333;
      }
      .bg {
        background: red;
        color: #fff;
      }
      .fix {
        background: red;
        color: #fff;
        height: 0;
        position: fixed;
        top: 0;
        line-height: 50px;
        font-size: 30px;
        text-align: center;
        width: 100%;
        overflow: hidden;
        transition: all 0.5s linear;
      }
      header input {
        height: 30px;
        line-height: 30px;
        width: 300px;
      }
      .inp-ul {
        color: #333;
        display: none;
        position: absolute;
        top: 73px;
        background: pink;
        left: 448px;
        height: 200px;
        overflow: hidden;
        width: 300px;
      }
      .inp-ul li {
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        border-bottom: 1px dotted #333;
      }
      form {
        position: fixed;
        top: 50px;
        left: 0;
        width: 149px;
        border: 1px solid #333;
      }
      form input {
        width: 80px;
      }
      .daojishi {
        width: 149px;
        background: red;
        position: fixed;
        bottom: 20px;
        left: 0;
        height: 100px;
        color: #fff;
        padding: 10px;
        box-sizing: border-box;
      }
      .time {
        margin-top: 10px;
      }
      .time span {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <script src="../js/jquery.js"></script>
    <header class="w">
      <input type="text" placeholder="手机" />
      <ul class="inp-ul"></ul>
    </header>
    <div class="fix">搜索框</div>
    <section class="nav w">导航</section>
    <section class="slide w">轮播图</section>
    <main class="w">
      <section class="mian-content">
        <ul>
          <li>
            <div class="floor">一楼</div>
            <div class="con">内容</div>
          </li>
          <li>
            <div class="floor">二楼</div>
            <div class="con">内容</div>
          </li>
          <li>
            <div class="floor">三楼</div>
            <div class="con">内容</div>
          </li>
          <li>
            <div class="floor">四楼</div>
            <div class="con">内容</div>
          </li>
          <li>
            <div class="floor">五楼</div>
            <div class="con">内容</div>
          </li>
          <li>
            <div class="floor">六楼</div>
            <div class="con">内容</div>
          </li>
        </ul>
      </section>
      <section class="youcedaohang">
        <ol>
          <li class="bg">一楼</li>
          <li>二楼</li>
          <li>三楼</li>
          <li>四楼</li>
          <li>五楼</li>
          <li>六楼</li>
          <div style="border-bottom: none" class="top1">顶部</div>
        </ol>
      </section>
    </main>
    <footer class="w">底部</footer>
    <form action="javascript:;">
      账号：<input type="text" name="user" /><br />
      密码：<input type="password" name="pass" />
      <button>登录</button>
    </form>
    <div class="daojishi">
      <p>距离五一倒计时</p>
      <p class="time">
        <span class="shi">00</span>:<span class="fen">00</span>:<span
          class="miao"
          >00</span
        >
      </p>
    </div>
    <script>
      /*
         需求分析：
           1.到达相应的楼层，右侧导航也会到达
           2.点击右侧任意导航，就会跳转到相应的楼层
           3.点击顶部，就会利用定时器回到顶部
           4.滚动条到达某一个位置的时候，顶部就会固定在上方
           5.百度搜索框
           6.7天免登录
           7.倒计时(每两个小时一次)
       */
      // 获取操作对象
      var head = document.querySelector("header");
      var fix = document.querySelector(".fix");
      var top = document.querySelector(".top1");
      var olLis = document.querySelectorAll("ol li");
      var ulLis = document.querySelectorAll("ul li");
      var timer = "";
      // 1. 顶部功能实现
      window.onscroll = function () {
        if (document.documentElement.scrollTop > 400) {
          fix.style.height = "50px";
        } else {
          fix.style.height = "0";
        }
        // 3.到达相应的楼层，右侧导航也会到达到达的楼层添加class属性
        for (let i = 0; i < ulLis.length; i++) {
          var num = 400;
          if (document.documentElement.scrollTop > 300 + i * 400) {
            $(olLis[i]).addClass("bg").siblings().removeClass("bg");
          }
        }
      };

      // // 2.回到顶部功能实现
      top.onclick = function () {
        timer = setInterval(function () {
          document.documentElement.scrollTop =
            document.documentElement.scrollTop - 30;
          if (document.documentElement.scrollTop <= 0) {
            clearInterval(timer);
          }
        }, 30);
      };

      // // 4.点击任意楼层，回到任意楼层
      $(olLis).mouseover(function () {
        $(this).addClass("bg").siblings().removeClass("bg");
        var index = $(this).index();
        $("html").animate({ scrollTop: index * 400 + 400 }, 300);
        if (document.documentElement.scrollTop == 300) {
          $(olLis)[0].addClass("bg").siblings().removeClass("bg");
        }
      });

      // 5.百度搜索框
      var inp = document.querySelector("input");
      var inpUl = document.querySelector(".inp-ul");
      inp.oninput = function () {
        var val = inp.value;
        var newSc = document.createElement("script");
        newSc.src = `
        https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&wd=${val}&req=2&bs=ai&pbs=ai&csor=5&pwd=zhon&cb=fn1&_=1617267109429
        `;
        document.body.appendChild(newSc);
        document.body.lastElementChild.remove();
      };
      function fn1(dt) {
        // console.log(dt);
        if (dt.g) {
          inpUl.style.display = "block";
          var data = dt.g;
          var str = "";
          data.forEach((item) => {
            str += `
              <li>${item.q}</li>
            `;
          });
          inpUl.innerHTML = str;
        } else {
          inpUl.style.display = "none";
        }
      }

      // 6. 7天免登录
      var frm = document.querySelector("form");
      var btn = document.querySelector("button");
      frm.onsubmit = function () {
        var user1 = document.querySelector('[name="user"]');
        var pass1 = document.querySelector('[name="pass"]');
        // 判断cookie中有没有，有的话，直接登录，没有的话，把账号存入cookie中
        var cookie1 = document.cookie ? document.cookie : [];
        var user11 = user1.value;
        console.log(cookie1);
        setCookie("name1", user11, 10000000000);
        alert("登录成功");
      };

      // 7. 倒计时每2小时1次
      var shi = document.querySelector(".shi");
      var fen = document.querySelector(".fen");
      var miao = document.querySelector(".miao");
      var timer = setInterval(showTime, 1000);
      showTime();
      function showTime() {
        var d1 = new Date();
        var d2 = new Date("2021-4-20");
        var d = d2 - d1;
        // 先获取秒
        var seconds = parseInt(d / 1000);
        // 获取小时
        var hours = parseInt(seconds / (60 * 60));
        var d3 = seconds - hours * 60 * 60;
        // 获取分钟
        var minutes = parseInt(d3 / 60);
        // 获取秒
        seconds = seconds - minutes * 60 - hours * 60 * 60;
        hours = hours < 0 ? 0 + hours : hours;
        minutes = minutes < 0 ? 0 + minutes : minutes;
        seconds = seconds < 0 ? 0 + seconds : seconds;
        shi.innerHTML = hours;
        fen.innerHTML = minutes;
        miao.innerHTML = seconds;
      }
    </script>
  </body>
</html>
